<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">用户</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

<!--查询表单-->
    <el-form :inline="true" :model="searchMap" class="demo-form-inline">

        <el-form-item label-width="160px" label="用户名">
            <el-input v-model="searchMap.username" placeholder="请输入用户名"></el-input>
        </el-form-item>

        <el-form-item label="用户昵称">
            <el-input v-model="searchMap.name" placeholder="请输入用户昵称"></el-input>
        </el-form-item>

        <el-form-item label="注册手机">
            <el-input v-model="searchMap.phone" placeholder="请输入注册手机"></el-input>
        </el-form-item>


        <el-form-item>
            <!-- <el-button type="primary" @click="onSubmit">查询</el-button> -->
            <el-button-group>
  <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
  <el-button :disabled="ds" type="primary" icon="el-icon-s-ticket" @click="presenterYh" >赠送优惠券</el-button>
</el-button-group>
          </el-form-item>
          
    </el-form>


    <!--数据表格-->
  <el-table
    :data="tableData"
    stripe
    style="width: 150%"
    align="center">
    <el-table-column
      label="用户名"
      width="170"
      prop="username">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="注册手机号"
      width="170">
    </el-table-column>
    <el-table-column
      prop="nickName"
      label="昵称"
      width="150">
    </el-table-column>
    <el-table-column
      prop="sex2"
      label="性别"
      width="100">
    </el-table-column>
      <el-table-column label="使用状态" width="100">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="1"
            inactive-value="0"
            @change="changeSwitchStatus(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
    <el-table-column label="操作" width="210">
      <template slot-scope="scope">
          <el-button-group>
            <el-button type="primary" icon="el-icon-view" @click="getUserinfo(scope.$index, scope.row)"></el-button>
            <!-- <el-button type="warning" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)"></el-button> -->
            <el-button type="danger" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)"></el-button>
          </el-button-group>
      </template>
    </el-table-column>
  </el-table>

    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSizeList"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      align="center">
    </el-pagination>
    </div>
</template>

<script>

export default {
     data () {
      return {
        ds:true,
        ths: true,
        // 呈现数据
        tableData: [],
        // 当前页码
        currentPage: 1,
        // 页大小
        pageSize: 6,
        // 页大小列表
        pageSizeList: [6, 10, 20, 50, 100],
        // 总记录数
        total: 0,
        // 查询表单对象
        searchMap: {},
        // 控制对话框是否显示的标志
        dialogFormVisible: false,
        // 绑定表单对象
        userForm: {},
        // 表单label的宽度
        formLabelWidth: '120px',
        // 映射上传文件组件对应的文件路径
        imageUrl: ''
      }
    },
    methods: {
      
    // //赠送优惠券方法
    presenterYh (){
      //判断多选框
      // this.ds=false
    },

      // switch改变事件
    async changeSwitchStatus (row) {
      // console.log(row.status)
      // 发请求
        const { data: res } = await this.$http.post(`/user/update`,row)
        if (res.code === 200 && row.status==1) {
            this.$message({
              type: 'success',
              message: '已开启使用!'
            })
            // 刷新页面
            this.getBrandList()
        }else if (res.code === 200 && row.status==0) {
            this.$message({
              type: 'success',
              message: '已关闭使用!'
            })
            // 刷新页面
            this.getBrandList()
        }
    },

      // 获取用户信息列表
      async getBrandList () {
        // 发送请求查询数据并返回
        const { data: res } = await this.$http.post(`/user/findPage?page=${this.currentPage}&size=${this.pageSize}`,this.searchMap)
        this.tableData = res.rows
         //判断性别
         for (let index = 0; index < this.tableData.length; index++) {
      if(this.tableData[index].sex==0){
        this.tableData[index].sex2="女"
      }
      if(this.tableData[index].sex==1){
          this.tableData[index].sex2="男"
      }
         }
        this.total = res.total
      },

      // 查询按钮
      onSubmit () {
        this.getBrandList()
      },


      //查看用户详情按钮
       async getUserinfo(index,row){
        const username = row.username
        this.$router.push({
        path: '/user/user_by_index',
        query: {
          username: username
        }
      })
      },


      // 页大小改变
      async handleSizeChange (val) {
        this.pageSize = val
        this.getBrandList()
      },

      // 页码改变
      async handleCurrentChange (val) {
        this.currentPage = val
        this.getBrandList()
      },
    },

    // 钩子函数
    async created () {
        this.getBrandList()
    }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
